import { useEffect, useState } from 'react'
import { isExternal } from '../../utils/index'
import './index.scss'
const SvgIcon = (props: any) => {
    const { iconClass = true, className = '' } = props
    const [isExternalShow, setIsExternalShow] = useState<boolean>(false)
    const [iconName, setIconName] = useState<string>('')
    const [svgClass, setSvgClass] = useState<string>('')
    const [styleExternalIcon, setStyleExternalIcon] = useState({})
    useEffect(() => {
        setIsExternalShow(isExternal(iconClass))
        if (className) {
            setSvgClass(`svg-icon${className}`)
        } else {
            setSvgClass(`svg-icon`)
        }
        setStyleExternalIcon({
            mask: `url(${iconClass}) no-repeat 50% 50%`,
            '-webkit-mask': `url(${iconClass}) no-repeat 50% 50%`
        })
        setIconName(`#icon-${props.iconClass}`)
    }, [iconClass])
    return (
        <>
            {isExternalShow ?
                <div style={styleExternalIcon} className="svg-external-icon svg-icon" /> :
                <svg className={svgClass} aria-hidden="true">
                    <use xmlns={iconName} />
                </svg>
            }
        </>
    )
}
export default SvgIcon